<template>
	<view>
		<!-- <uni-nav-bar left-text="首页">
			<view slot="default">
				<u-search placeholder="搜索" v-model="navvalue" :show-action="false"></u-search>
			</view>
		</uni-nav-bar> -->
		<!-- <u-navbar :is-back="false" title="">
			<view slot="default" style="width: 100%;">
				<view class="title">
					首页
				</view>
			</view>
		</u-navbar> -->
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block slot="content">首页</block>
		</cu-custom>

		<!-- 		<view class="content">
			<vgt-tab :list="navlist" @onValueChange="onValueChange"></vgt-tab>
		</view>
 -->
		<un-login v-if="unLogin">您还没登录，请登录</un-login>
		<!-- mescroll组件，官网http://www.mescroll.com/uni.html -->
		<!-- 初始化操作mescrollInit,下拉刷新是downCallback,向上滑是upCallback -->

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
			<!--  @init="mescrollInit" @down="downCallback" @up="upCallback"为固定值,不可删改(与mescroll-mixins保持一致) 
			:down="downOption" :up="upOption" 绝大部分情况无需配置 
			:top="顶部偏移量" :bottom="底部偏移量" :topbar="状态栏" :safearea="安全区" (常用)
			字节跳动小程序 ref="mescrollRef" 必须配置 
			此处支持写入原生组件 -->
			<view class="cu-card case isCard">
				<view class="cu-item shadow" v-for="(item,index) in list" :key="index" @click="goDetail(item._id)">
					<view v-for="(item,index) in item.userInfo" :key="index">
						<view class="cu-list menu-avatar">
							<view class="cu-item">
								<view class="cu-avatar lg" style="background-color: transparent;">
									<image class="cu-avatar lg" style="background-color: transparent;"
										:src="item.avatar" mode=""></image>
								</view>
								<view class="content flex-sub">
									<view>{{item.nickname}}</view>

								</view>
							</view>
						</view>
					</view>
					<!-- 文字 -->
					<view class="text-content padding-sm text-cut " style="width:100%;font-size: 20px;">
						{{item.value || item.input}}
					</view>
					<!-- 图片 -->
					<view class="image">
						<image mode="widthFix" :src="item.imgList[0].imgurl"></image>
						<!-- <view class="cu-bar bg-shadeBottom"> <text class="text-cut">{{item.title}}</text></view> -->
					</view>
					<view class="content flex-sub">
						<view class="text-gray flex justify-around padding-bottom">
							<!-- <view v-for="(items,index) in item.userInfo">
								<view class="cu-avatar round lg" :style="'backgroundImage:url('+ items.avatar +'?x-oss-process=image/resize,m_fixed,w_100' +')'"></view>
							</view> -->
							<view><text class="cuIcon-attentionfill "></text> {{item.view_num >= 0 ? item.view_num : 0}}</view>
							<view><text class="cuIcon-messagefill"></text> {{item.comment_num >= 0 ? item.comment_num : 0}}</view>
							<view><text class="cuIcon-appreciatefill"></text> {{item.love_num >= 0 ? item.love_num : 0}}</view>
						</view>
						<view>{{item.createTime}}</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin,混入js
		components: {

		},
		computed: {},
		data() {
			return {
				unLogin: false,
				//未分类总列表数据
				list: [],
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					noMoreSize: 4
				},
				response: '',
				navvalue: "",
				navlist: ['最新', '图片', '你好']
			}
		},
		onLoad: function(option) {

		},
		onShow() {
			// onshow出现在屏幕一次就触发一次。
			//start 检测登录
			this.ssuserid = getApp().globalData.ssuserid;
			this.unLogin = getApp().globalData.unLogin;
			// if (this.ssuserid == '') {
			// 	return false;
			// }
			// console.log(JSON.stringify(this.list));
			//End 检测是否登录 
		},
		methods: {
			onValueChange(e) {
				console.log(e.currentItem);
			},
			/*下拉刷新的回调*/
			downCallback() {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			upCallback(page) {

				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 设置为4
				console.log(this.navvalue);
				var fenlei = this.fenlei;

				var that = this;
				uniCloud.callFunction({
					name: "bbs_topic",
					data: {
						cloudAction: "index",
						/* index为全部文章 */
						params: {
							start: (pageNum - 1) * pageSize,
							limit: pageSize,
							username: '',
							createTime: fenlei
						}
					},
					success(response) {
						// console.log(result)
						let res = response.result.data
						let curPageData = res.list
						// console.log(res);
						let curPageLen = res.list.length //当前页返回的数据条数
						let totalSize = res.total

						//设置列表数据
						if (page.num == 1) that.list = []; //如果是第一页需手动置空列表

						that.list = that.list.concat(curPageData); //列表追加新数据		

						// 控制台输出list
						// console.log(JSON.stringify(that.list))
						// 请求成功,隐藏加载状态
						that.mescroll.endBySize(curPageLen, totalSize)
					},
					fail() {
						//  请求失败,隐藏加载状态
						console.log('请求失败');
						that.mescroll.endErr()
					}
				})
				// 此处仍可以继续写其他接口请求...
				// 调用其他方法...
			},
			goDetail: function(id) {
				uni.navigateTo({
					url: "../../bbs/topic/show?id=" + id
				})
			},
		},
		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			return {
				title: '首页',
				path: "/pages/index/tiezi"
			}
		},

		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareTimeline() {
			return {
				title: '首页',
				path: "/pages/index/tiezi"
			}
		}
	}
</script>

<style lang="scss" scoped>
	@media screen and (min-width: 1000px) {
		page {}
	}

	image {
		border-radius: 5px !important;
	}

	.cu-item {
		border-radius: 5px !important;
		background-color: #ececec;
		margin-bottom: 10px;
	}

	.big {
		width: 10px;
		height: 100px;
		background-color: #dcdcdc;
	}

	.title {
		text-align: center;
		width: 100%;
	}
</style>
